<template>
<div id="firstComeinShow">
    <el-row :gutter="20">
      <el-col :span="6">
        用户ID : <el-input v-model="search.custId" style="width: calc(100% - 100px)" @click="searchList"></el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" icon="el-icon-search" @click="searchList">搜索</el-button>
      </el-col>
    </el-row>
    <el-row>
      <div class="func-block">用户画像：</div>
      <el-card style="padding-top: 20px">
        <el-form label-width="120" style="margin-left: 20px">
          <el-form-item label="用户ID：">{{userDetail.custId}}</el-form-item>
          <el-form-item label="用户持仓：">
            <el-tag style="margin-right: 5px" :key="Math.random()+tag.stock_name" v-for="tag in userDetail.host">{{tag.stock_name}}</el-tag>
          </el-form-item>
          <el-form-item label="用户自选：">
            <el-tag style="margin-right: 5px" :key="tag.stock_name" v-for="tag in userDetail.selfOptions">{{tag.stock_name}}</el-tag>
          </el-form-item>
          <el-form-item label="用户兴趣：" style="margin-bottom: 0!important;">
            <el-tag style="margin-right: 5px" :key="Math.random()+tag" v-for="tag in userDetail.interest">{{tag}}</el-tag>
          </el-form-item>
        </el-form>
      </el-card>
    <el-row>
    <div class="func-block">用户推荐资讯 ( 版本:{{dataSourceFrom}} ) ：</div>
    <el-table :data="newList" border style="width: 100%">
      <el-table-column label="标题" prop="title">
        <template slot-scope="scope">
          <span style="color: #409eff;cursor: pointer" @click="handleShow(scope.row)">{{scope.row.title}}</span>
        </template>
      </el-table-column>
      <el-table-column label="推荐策略类型" prop="recType"></el-table-column>
      <el-table-column label="发布时间" prop="publishTime"></el-table-column>
      <el-table-column label="更新时间" prop="updateTime"></el-table-column>
    </el-table>
  </el-row>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="search.pageNum"
                     :page-sizes="[10, 20, 30, 50]" :page-size="search.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </el-row>
  <el-dialog :fullscreen='true' :title="'查看'" :visible.sync="dialogFormVisible">
    <el-form  :model="temp" label-position="left" label-width="130px" style='margin: auto; max-width: 1200px'>
      <el-form-item label="标题" prop="title">
        <el-input disabled v-model="temp.title" type="text"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="股票">
            <el-tooltip v-for="tag in temp.stockInfoslist" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
              <el-tag>{{tag.name+'('+tag.code+')'}}</el-tag>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="基金">
            <el-tooltip v-for="tag in temp.fundInfoslist" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
              <el-tag>{{tag.name+'('+tag.code+')'}}</el-tag>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="主题">
            <el-tooltip v-for="tag in options0" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
              <el-tag>{{tag.name}}</el-tag>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="行业">
            <el-tooltip v-for="tag in options1" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
              <el-tag>{{tag.name}}</el-tag>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="市场">
            <el-tooltip v-for="tag in temp.marketInfos" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
              <el-tag>{{tag.name}}</el-tag>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人物">
            <el-tooltip v-for="tag in temp.peopleInfos" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
              <el-tag>{{tag.name}}</el-tag>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="地域">
            <el-tooltip v-for="tag in temp.districtInfos" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
              <el-tag>{{tag.name}}</el-tag>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组织">
            <el-tooltip v-for="tag in temp.organInfos" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
              <el-tag>{{tag.name}}</el-tag>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="12">
          <el-form-item label="核心标签(主)" prop="mainKeyword">
            <el-tag v-for="tag in temp.mainKeyword" :key="tag">{{tag}}</el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="核心标签(副)" prop="viceKeyword">
            <el-tag v-for="tag in temp.viceKeyword" :key="tag">{{tag}}</el-tag>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="所属栏目" prop="newsClassId">
            <el-select value-key='id' multiple popper-class="hide" disabled v-model="temp.newsClassId" type="text" placeholder="请输入">
              <el-option v-for="(item,index) in options" :key="item.id" :value="item" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="第三方栏目" prop="events">
            <el-tag v-for="tag in temp.thirdPartClassVOS" :key="tag.className">{{tag.className}}</el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="数据源来源" prop="tbSource">
            <el-input v-model="temp.tbSource" readonly></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="6" style="line-height:36px;color: #666666;font-weight: 700;">App场景运营标记:</el-col>
        <el-col :span="6">
          <el-form-item label="覆盖类型" prop="ranges">
            <el-select v-model="temp.ranges" type="text" placeholder="请选择" :disabled="temp.rangesDisable">
              <el-option v-for="item in rangesOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="展示场景" prop="scene">
            <el-select multiple v-model="temp.scene" type="text" placeholder="请选择" @change="changeScene">
              <el-option v-for="item in sceneOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="新闻类型" prop="newstype">
            <el-select v-model="temp.newstype" type="text" placeholder="请选择" :disabled="temp.newsTypeDisable">
              <el-option v-for="item in newstypeOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="6">
          <el-form-item label="态度" prop="attitude">
            <el-select disabled v-model="temp.attitude" type="text" placeholder="请选择">
              <el-option :value="-2" label="无态度"></el-option>
              <el-option :value="-1" label="利空"></el-option>
              <el-option :value="0" label="中性"></el-option>
              <el-option :value="1" label="利好"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态" prop="online">
            <el-select disabled v-model="temp.online" type="text" placeholder="请选择">
              <el-option :value="0" label="立即上线"></el-option>
              <el-option :value="1" label="暂缓上线"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="推送方式" prop="sendChannel">
            <el-select disabled :default-first-option="true" v-model="temp.sendChannel" type="text" placeholder="请选择">
              <el-option value="全员推送" label="全员推送"></el-option>
              <el-option value="不推送" label="不推送"></el-option>
              <el-option value="按板块推送" label="按板块推送"></el-option>
              <el-option value="按个股推送" label="按个股推送"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="置顶时间" prop="topTime">
            <el-input disabled v-model="temp.topTime" type="text" placeholder="选择日期"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="摘要" prop="summary">
            <el-input disabled v-model="temp.summary" type="textarea" :rows="5" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="正文预览" prop="content">
            <el-tabs type="card"  @tab-click="handleTabClick">
              <el-tab-pane label="手机预览">
                <el-card class="phone">
                  <div class="top-bar">
                    资讯预览
                  </div>
                  <div class="title">{{temp.title}}</div>
                  <div class="info">
                    <span>来源：{{formatSource(temp.source)}}&emsp;</span>
                    <span>发布时间：{{temp.publishTime}}</span>
                  </div>
                  <div class="summary">摘要：{{temp.summary}}</div>
                  <div class="content" id="fetchContent">
                    <p v-html="formatContent(temp)"></p>
                  </div>
                </el-card>
              </el-tab-pane>
              <el-tab-pane label="PC预览">
                <el-card class="pc">
                  <div class="title">{{temp.title}}</div>
                  <div class="info">
                    <span>来源：{{formatSource(temp.source)}}&emsp;</span>
                    <span>发布时间：{{temp.publishTime}}</span>
                  </div>
                  <div class="summary">摘要：{{temp.summary}}</div>
                  <div class="content" id="fetchContent">
                    <p v-html="formatContent(temp)"></p>
                  </div>
                </el-card>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
        </el-col>
        <el-col v-show="preview" :span="24">
          <el-form-item label="原文">
            <el-card>
              <div class="preview" v-html="previewContent"></div>
            </el-card>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="发布时间" prop="publishTime">
            <el-input disabled v-model="temp.publishTime" type="text" :rows="5" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="来源" prop="source">
            <el-select disabled v-model="temp.source" type="text" placeholder="请选择">
              <el-option v-for="(item, index) in dataDict.news_source" :key="item.dictValue" :value="item.dictValue" :label="item.dictValue"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button plain class="search-bar-button" style="border-width: 2px" type="primary" @click="extendBarVisable = !extendBarVisable">{{extendBarVisable?'收起':'展开'}}附加字段<i
              :class="extendBarVisable?'el-icon-caret-top':'el-icon-caret-bottom'"></i>
            </el-button>
          </el-form-item>
        </el-col>
        <el-col v-show="extendBarVisable" v-for="i of 10" :key='i' :span="24">
          <el-form-item :label="'附加字段'+i" :prop="'additional_'+ i">
            <el-input disabled v-model="temp['additional_'+ (i-1)]" type="text" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="资讯配图">
            <span v-if="!image">暂无配图</span>
            <img style="max-height: 300px" :src="image.url" :alt="image.name">
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
<!--      <el-button type="success" @click="updateAppStatus">更新App标记</el-button>-->
      <!--        <el-button type="success" @click="handleUpdateTime">更新排序</el-button>-->
      <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import { articleGet, userClassList } from '../../api/article'
import { getTypeDict } from '../../api/systemManagement'
import { searchUserDetail } from '../../api/recomandAdvice'

/**
 *  演示使用 后期会删除
 */
export default {
  name: 'firstComeinShow',
  data() {
    return {
      search: {
        custId: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      userDetail: {
        custId: '',
        host: '',
        selfOptions: '',
        interest: ''
      },
      newList: [],
      dialogFormVisible: false,
      previewDialogVisible: false,
      preview: false,
      temp: {
        attitude: 0,
        author: '',
        source: '',
        isOriginal: 1,
        content: '',
        sendChannel: '',
        newsClassId: [],
        newsPlateCodes0: [],
        conceptInfos: [],
        conceptInfoslist: [],
        industryInfos: [],
        newsPlateCodes2: [],
        stockInfos: [],
        stockInfoslist: [],
        fundInfos: [],
        fundInfoslist: [],
        marketInfos: [],
        topTime: '',
        summary: '',
        title: '',
        enterTime: '',
        publishTime: '',
        tbSource: '',
        newsTypeDisable: false,
        rangesDisable: false
      },
      previewContent: '',
      image: '',
      extendBarVisable: false,
      dataDict: {
        news_source: []
      },
      options: [],
      options0: [],
      options1: [],
      options2: [],
      rangesOptions: [
        {
          value: 0,
          label: '空白'
        },
        {
          value: 1,
          label: '按全市场来'
        },
        {
          value: 2,
          label: '按行业'
        },
        {
          value: 3,
          label: '按个股'
        }
      ],
      sceneOptions: [
        {
          value: '0',
          label: '空白'
        },
        {
          value: '1',
          label: '银小河浮窗'
        }, {
          value: '2',
          label: '基金动态'
        }
      ],
      newstypeOptions: [
        {
          value: 0,
          label: '空白'
        },
        {
          value: 1,
          label: '新闻'
        },
        {
          value: 2,
          label: '重磅'
        },
        {
          value: 3,
          label: '突发'
        },
        {
          value: 4,
          label: '解读'
        },
        {
          value: 5,
          label: '异动'
        },
        {
          value: 6,
          label: '公告'
        }
      ],
      dataSourceFrom:''
    }
  },
  methods: {
    searchList() {
      this.search.pageNum = 1
      this.getDataList()
    },
    getDataList() {
      const params = {
        ...this.search
      }
      params.pageNum = params.pageNum - 1
      searchUserDetail(params).then(res => {
        const obj = Array.isArray(res.Data) ? res.Data : []
        if (obj.length > 0) {
          this.newList = Array.isArray(obj[0].newsList) ? obj[0].newsList : []
          this.total = ~~obj[0].total
          this.userDetail.custId = obj[0].user.custId
          this.userDetail.host = Array.isArray(obj[0].user.holdList) ? obj[0].user.holdList : []
          this.userDetail.selfOptions = Array.isArray(obj[0].user.optionalStock) ? obj[0].user.optionalStock : []
          this.userDetail.interest = Array.isArray(obj[0].user.likeList) ? obj[0].user.likeList : []
          this.dataSourceFrom = obj[0].version
        } else {
          this.newList = []
          this.userDetail.custId = ''
          this.userDetail.host = []
          this.userDetail.selfOptions = []
          this.userDetail.selfOptions = []
        }
      })
    },
    handleSizeChange(val) {
      this.search.pageSize = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      this.search.pageNum = val
      this.getDataList()
    },
    handleShow(row) {
      this.preview = false
      row.editLoading = true
      const params = {
        id: row.newsId
      }
      articleGet(params).then((response) => {
        this.temp = Object.assign({}, response.Data[0])
        var ranges = this.temp.ranges || 0
        var scene =
          this.temp.scene === undefined
            ? ['0']
            : this.temp.scene.split(',').filter((item) => {
              return item !== ''
            })
        var newstype = this.temp.newstype || 0
        for (let i = 0; i < this.temp.newsInfoExtends.length; i++) {
          this.temp['additional_' + this.temp.newsInfoExtends[i].extendIndex] =
            this.temp.newsInfoExtends[i].extendContent || ''
        }
        this.image = response.Data[0].pictureEntity || ''
        if (this.temp.online === 2) this.temp.online = 0
        this.temp.stockInfoslist = Object.assign(
          {},
          response.Data[0].stockInfos
        )
        this.temp.fundInfoslist = Object.assign({}, response.Data[0].fundInfos)
        this.options0 = Object.assign([], this.temp.conceptInfos)
        this.options1 = Object.assign([], this.temp.industryInfos)
        this.options2 = Object.assign([], this.temp.userDefinedInfos)
        this.organOptions = Object.assign([], this.temp.organInfos)
        this.flowChartList = Object.assign([], this.temp.marketInfos)
        this.rwOptions = Object.assign([], this.temp.peopleInfos)
        this.areaOptions = Object.assign([], this.temp.districtInfos)
        this.$set(
          this.temp,
          'newsPlateCodes2',
          Object.assign([], this.temp.userDefinedInfos)
        )
        this.$set(
          this.temp,
          'newsClassId',
          Object.assign([], this.temp.classInfos)
        )
        this.$set(this.temp, 'ranges', ranges)
        this.$set(this.temp, 'scene', scene)
        this.$set(this.temp, 'newstype', newstype)

        // this.dialogStatus = 'update';
        this.dialogFormVisible = true
        // let content = this.temp.content;
        // console.log(this.temp,"handShow",response)
        // if (this.$refs.editor) this.$refs.editor.setContent(content)
        row.editLoading = false

        this.$nextTick(() => {
          const strongs = document.querySelectorAll('.phone .content>p strong')
          for (let i = 0; i < strongs.length; i++) {
            if (strongs[i].getAttribute('data-code')) {
              const text = strongs[i].innerText
              strongs[i].innerHTML = `<span class="news-keyword">${text}</span>`
            }
          }
        })

        this.$nextTick(() => {
          const strongs = document.querySelectorAll('.pc .content>p strong')
          for (let i = 0; i < strongs.length; i++) {
            if (strongs[i].getAttribute('data-code')) {
              const text = strongs[i].innerText
              strongs[i].innerHTML = `<span class="news-keyword">${text}</span>`
            }
          }
        })
      })
    },
    formatContent(data) {
      if (!data.content) return
      // console.log(data)
      const keyword = []
      // console.log(data)
      if (data.stockInfos && data.stockInfos.length > 0) {
        keyword.push(
          data.stockInfos
            .map((val) => {
              return val.name
            })
            .join('|')
        )
      }
      if (data.conceptInfos && data.conceptInfos.length > 0) {
        keyword.push(
          data.conceptInfos
            .map((val) => {
              return val.name
            })
            .join('|')
        )
      }
      if (data.industryInfos && data.industryInfos.length > 0) {
        keyword.push(
          data.industryInfos
            .map((val) => {
              return val.name
            })
            .join('|')
        )
      }
      if (data.newsPlateCodes2 && data.newsPlateCodes2.length > 0) {
        keyword.push(
          data.newsPlateCodes2
            .map((val) => {
              return val.name
            })
            .join('|')
        )
      }
      if (data.fundInfos && data.fundInfos.length > 0) {
        keyword.push(
          data.fundInfos
            .map((val) => {
              return val.name
            })
            .join('|')
        )
      }

      const fenD = data.classInfos[0] || { name: '' }
      let content
      if (fenD.name === '港澳资讯') {
        content = data.content.replace(/(\r\n)|(\r)|(\n)/g, '<br /><br />')
      } else {
        content = data.content
      }
      if (keyword.length === 0) return content
      const contentReg = new RegExp(
        '(?!<[^>]*)(' + keyword.join('|').replace(/\*/g, '\\*') + ')(?![^<]*>)',
        'g'
      )

      //  content = content.replace(/<table/g,'<div class="xg_table_wrapper"><table')
      //  content = content.replace(/\<\/table>/g,`</table> </div>`)
      // const contentReg = new RegExp('(' + keyword + ')','g')

      // console.log(contentReg)
      return content.replace(
        contentReg,
        '<span class="news-keyword">$1</span>'
      )
    },
    formatSource(data) {
      for (let i = 0; i < this.dataDict.news_source.length; i++) {
        if (this.dataDict.news_source[i].dictValue === data) {
          return this.dataDict.news_source[i].dictValue
        }
      }
      return data
    },
    handleTabClick(node) {
      if (node.paneName === '0') {
        this.$nextTick(() => {
          const strongs = document.querySelectorAll('.phone .content>p strong')
          for (let i = 0; i < strongs.length; i++) {
            if (strongs[i].getAttribute('data-code')) {
              const text = strongs[i].innerText
              strongs[i].innerHTML = `<span class="news-keyword">${text}</span>`
            }
          }
        })
      } else {
        this.$nextTick(() => {
          const strongs = document.querySelectorAll('.pc .content>p strong')
          for (let i = 0; i < strongs.length; i++) {
            if (strongs[i].getAttribute('data-code')) {
              const text = strongs[i].innerText
              strongs[i].innerHTML = `<span class="news-keyword">${text}</span>`
            }
          }
        })
      }
    },
    getDict() {
      getTypeDict({ type: 'news_source' }).then((response) => {
        this.dataDict.news_source = response.Data
      })
    },
    changeScene(val) {
      if (val.length > 0) {
        if (val.length > 1) {
          this.temp.newsTypeDisable = false
          this.temp.rangesDisable = false
        } else if (val.length === 1) {
          if (val[0] === '2') {
            this.temp.ranges = 0
            this.temp.newstype = 0
            this.temp.newsTypeDisable = true
            this.temp.rangesDisable = true
          } else {
            this.temp.newsTypeDisable = false
            this.temp.rangesDisable = false
          }
        } else {
          this.temp.newsTypeDisable = false
          this.temp.rangesDisable = false
        }
      } else {
        this.temp.newsTypeDisable = false
        this.temp.rangesDisable = false
      }
    },
    getClass() {
      const params = {
        pageNum: 1,
        pageSize: 9999
      }
      userClassList(params).then((response) => {
        const temp = {}
        const data = response.Data
        const length = data.length
        for (let i = 0; i < length; i++) {
          temp[data[i].id] = data[i]
          this['options'].push(data[i])
        }
      })
    }
  },
  created() {
    this.getDict() // 获取数据字典来源
    this.getClass() // 获取栏目数据
    this.searchList()
  }
}
</script>

<style  lang="scss">
#firstComeinShow{
  padding: 20px;
  .func-block{
    height: 30px;
    line-height: 30px;
    margin: 20px 0;
    font-weight: 600;
  }
  .el-table thead th{
    border: 1px solid #ebeef5;
  }

}
</style>
